@import "tailwindcss/preflight";
@tailwind utilities;

@layer base {
  body {
    @apply text-white/80;
  }
}

@layer components {
  .glass-card {
    @apply bg-background-paper/30 backdrop-blur-xl border border-white/10;
  }
  
  .hover-glow {
    @apply hover:shadow-lg hover:shadow-primary-500/20 transition-shadow duration-300;
  }

  .text-glow {
    @apply text-primary-400 drop-shadow-[0_0_10px_rgba(33,150,243,0.3)];
  }

  .card {
    @apply bg-background-card/40 backdrop-blur-lg border border-white/10 rounded-xl p-6 
           transition-all duration-300 hover:bg-background-card/50 hover:border-primary-500/30
           hover:shadow-lg hover:shadow-primary-500/20;
  }

  .btn {
    @apply px-4 py-2 rounded-md transition-all duration-200;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700;
  }

  .btn-secondary {
    @apply bg-white/5 text-white/80 hover:bg-white/10;
  }

  .btn-danger {
    @apply bg-red-500/20 text-red-300 hover:bg-red-500/30;
  }

  .input {
    @apply bg-white/5 border border-white/10 rounded-md px-3 py-2 text-white/80
           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50;
  }

  .select {
    @apply bg-white/5 border border-white/10 rounded-md px-3 py-2 text-white/80
           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500/50;
  }
}

/* 添加动画 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
} 